<template>
	<!-- 设置和修改交易密码 -->
	<view>
		<nav-bar leftIcon="left"></nav-bar>
		<view style="padding: 220rpx 30rpx 0 30rpx; width: 100vw;margin: 0;box-sizing: border-box;" class="content1">
			<text class="text" v-if="isNew">{{ $t('設置交易密碼') }}</text>
			<text class="text" v-else>{{ $t('修改交易密碼') }}</text>
			<text class="text1" v-if="isNew">{{ $t('請輸入交易密碼，確保交易的安全性') }}</text>
			<text class="text1" v-else>{{ $t('爲確保您的賬戶安全，在您更改密碼後，提現、C2C出售、支付 服務和幣安卡應用等功能將玻禁用24小時。') }}</text>
			<view class="old" v-if="!isNew">
				<input @input="oldBlur" maxlength="6" class="old-ipt" v-model="oldpassword" :type="isShow"
					:placeholder="$t('請輸入舊密碼')">
				<view>
					<image @click="cutType('password')" v-if="isShow === 'text'" src="@/assets/login/zy.png" class="inpIcon">
					</image>
					<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
				</view>
			</view>
			<view class="old">
				<input @input="newBlur" maxlength="6" class="old-ipt" v-model="newpassword" :type="isShow"
					:placeholder="$t('請輸入新密碼')">
				<view>
					<image @click="cutType('password')" v-if="isShow === 'text'" src="@/assets/login/zy.png" class="inpIcon">
					</image>
					<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
				</view>
			</view>
			<view class="old">
				<input @input="againBlur" maxlength="6" class="old-ipt" v-model="againpassword" :type="isShow"
					:placeholder="$t('請確認密碼')">
				<view>
					<image @click="cutType('password')" v-if="isShow === 'text'" src="@/assets/login/zy.png" class="inpIcon">
					</image>
					<image @click="cutType('text')" v-else src="@/assets/myFlow/biyan.png" class="inpIcon"></image>
				</view>
			</view>
			<view @click="setPayPassword" class="submit">
				{{ $t('确认') }}
			</view>
			<view @click="goto" class="forget" v-if="!isNew">
				{{ $t('忘記密碼') }}
			</view>
		</view>

	</view>
</template>

<script setup>
import { ref, watch, nextTick } from 'vue'
import HInput from '@/components/h-input.vue'
const isShow = ref('password')
const isNew = ref(uni.getStorageSync('setUserInfo').payPasswordStatus ? false : true)
const oldpassword = ref('')
const newpassword = ref('')
const againpassword = ref('')
const setUserInfo = ref({})
import api from '@/hooks/safety.js'
import i18n from '@/locale/index'
const { setPayPasswordApi, ChangePayPasswordApi } = api()

setUserInfo.value = uni.getStorageSync('setUserInfo')

function goto() {
	uni.navigateTo({
		url: '/pages/changetransaction/changetransaction'
	})
}

//修改input密码状态
function cutType(val) {
	isShow.value = val
}

function oldBlur(val) {
	nextTick(() => {
		oldpassword.value = val.detail.value.replace(/\D/g, '')
		if (oldpassword.value !== val.detail.value) {
			uni.showToast({
				title: `${i18n.global.t('只能輸入數字')}`,
				icon: 'none',
			})
		}
	})
}

function newBlur(val) {
	nextTick(() => {
		newpassword.value = val.detail.value.replace(/\D/g, '')
		if (newpassword.value !== val.detail.value) {
			uni.showToast({
				title: `${i18n.global.t('只能輸入數字')}`,
				icon: 'none',
			})
		}
	})
}

function againBlur(val) {
	nextTick(() => {
		againpassword.value = val.detail.value.replace(/\D/g, '')
		if (againpassword.value !== val.detail.value) {
			uni.showToast({
				title: `${i18n.global.t('只能輸入數字')}`,
				icon: 'none',
			})
		}
	})
}

async function setPayPassword() {
	if (isNew.value) {
		if (!newpassword.value || !againpassword.value) return uni.showToast({
			title: `${i18n.global.t('請完善信息')}`,
			icon: 'none',
		})
		if (newpassword.value.length < 6) return uni.showToast({
			title: `${i18n.global.t('交易密碼應爲6位')}`,
			icon: 'none',
		})
		if (newpassword.value !== againpassword.value) return uni.showToast({
			title: `${i18n.global.t('密碼不一致')}`,
			icon: 'none',
		})
		await setPayPasswordApi('/user/getPayPasswordUp', {
			userId: uni.getStorageSync('setUserInfo').userId,
			payPassword: newpassword.value
		})
		setUserInfo.value.payPasswordStatus = 1
		uni.setStorageSync('setUserInfo', setUserInfo.value)
		uni.navigateBack()
		uni.showToast({
			title: `${i18n.global.t('設置成功！')}`,
		})
	} else {
		if (!oldpassword.value || !newpassword.value || !againpassword.value) return uni.showToast({
			title: `${i18n.global.t('請完善信息')}`,
			icon: 'none',
		})
		if (newpassword.value.length < 6 || oldpassword.value.length < 6) return uni.showToast({
			title: `${i18n.global.t('交易密碼應爲6位')}`,
			icon: 'none',
		})
		if (newpassword.value !== againpassword.value) return uni.showToast({
			title: `${i18n.global.t('密碼不一致')}`,
			icon: 'none',
		})
		await ChangePayPasswordApi('/user/getPayPasswordEdit', {
			userId: uni.getStorageSync('setUserInfo').userId,
			payPassword: newpassword.value,
			payPasswordOld: oldpassword.value
		})
		uni.navigateBack()
		uni.showToast({
			title: `${i18n.global.t('修改成功！')}`,
		})
	}
}
</script>

<style lang="scss" scoped>
.text {
	display: block;
	font-size: 42rpx;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 9rpx;
}

.text1 {
	display: block;
	font-size: 24rpx;
	font-weight: 300;
	color: #848686;
	line-height: 38rpx;
	margin-top: 40rpx;
	margin-bottom: 100rpx;
}

.inpIcon {
	width: 35rpx;
	height: 30rpx;
	margin-left: 15rpx;
}

.submit {
	width: 690rpx;
	height: 90rpx;
	background: linear-gradient(90deg, #039BDA, #0DF2ED);
	border-radius: 45rpx;
	margin-top: 57rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 90rpx;
	text-align: center;
}

.old {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 690rpx;
	height: 100rpx;
	background: #071A22;
	border-radius: 15rpx;
	padding: 0 25rpx;
	color: #FFFFFF;
	margin-top: 57rpx;

	.old-ipt {
		width: 100%;
	}
}

.forget {
	text-align: center;
	font-size: 24rpx;
	font-weight: 300;
	color: #FFFFFF;
	margin-top: 35rpx;
}
</style>